<template>
  <div class="process-panel-tab__content">
    <div class="process-panel-tab__content-table">
      <el-table :data="listenersList" size="small" border>
        <el-table-column type="index" label="序号" width="50px" />
        <el-table-column label="事件类型" prop="event" min-width="90px" show-overflow-tooltip />
        <el-table-column label="事件ID" prop="id" min-width="100px" show-overflow-tooltip />
        <el-table-column
          label="监听器类型"
          prop="listenerType"
          min-width="100px"
          show-overflow-tooltip
          :formatter="(row: any) => listenerTypeObject[row.listenerType]"
        />
        <el-table-column label="操作" prop="action" width="100px" align="center">
          <template #default="scope">
            <el-button
              link
              type="warning"
              title="编辑"
              @click="handleEdit(scope.row, scope.$index)"
            >
              <svg-icon className="process-icon" iconClass="editSquare"></svg-icon>
            </el-button>

            <el-button link type="danger" title="移除" @click="handleDelete(scope.$index)">
              <svg-icon className="process-icon" iconClass="delete"></svg-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="mt10">
      <el-button type="primary" size="small" style="width: 100%" @click="handleOpen()">
        <svg-icon className="process-icon" iconClass="plus"></svg-icon>
        添加监听器
      </el-button>
    </div>
  </div>

  <UserTaskListenersForm
    ref="userTaskListenersFormRef"
    @listenersFormSubmit="handleListenersFormSubmit"
  ></UserTaskListenersForm>
</template>

<script lang="ts">
  export default { name: 'PanelUserTaskListeners' }
</script>

<script setup lang="ts">
  import { nextTick, onMounted, ref, watch } from 'vue'
  import { initListenerType, listenerType } from './listenersUtils'
  import UserTaskListenersForm from './userTaskListenersForm.vue'
  import { useBpmnStore } from '../../store/bpmn'
  import { ElMessage, ElMessageBox } from 'element-plus'

  //////////////////////////////////////////////////
  // 属性
  //////////////////////////////////////////////////
  const bpmnStore = useBpmnStore()

  /**
   * 监听器列表
   */
  const listenersList: any = ref([])

  const listenerTypeObject: any = ref(listenerType)

  const userTaskListenersFormRef = ref()

  let bpmnElementListenersList: any = []

  let listenersIndex = -1

  watch(
    () => bpmnStore.activatedElementId,
    (newVal) => {
      if (newVal) {
        nextTick(() => {
          resetListenersList()
        })
      }
    },
    {
      immediate: true
    }
  )

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////
  /**
   * 重置
   */
  function resetListenersList() {
    bpmnElementListenersList = bpmnStore.getTaskListener()
    listenersList.value = bpmnElementListenersList.map((listener: any) =>
      initListenerType(listener)
    )
  }

  /**
   * 打开 监听器详情 侧边栏
   */
  function handleOpen() {
    listenersIndex = -1
    userTaskListenersFormRef.value.handleOpen('add', {
      id: bpmnStore.activatedElementId,
      type: bpmnStore.activatedElementType
    })
  }

  function handleEdit(row: any, index: number) {
    listenersIndex = index
    userTaskListenersFormRef.value.handleOpen('edit', row)
  }

  function handleDelete(index: number) {
    ElMessageBox.confirm('确认移除该监听器吗?', '移除提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        bpmnElementListenersList.splice(index, 1)
        listenersList.value.splice(index, 1)

        if (bpmnElementListenersList.length === 0) {
          bpmnStore.updateElementExtensions(`${bpmnStore.prefix}:TaskListener`)
        } else {
          bpmnStore.updateElementExtensions(bpmnElementListenersList)
        }
      })
      .catch(() => {
        ElMessage.info('操作被取消了')
      })
  }

  /**
   * 监听器表单提交
   */
  function handleListenersFormSubmit(listenerForm: any) {
    const listenerObject = bpmnStore.createListenerObject(listenerForm, true)

    if (listenersIndex === -1) {
      bpmnElementListenersList.push(listenerObject)
      listenersList.value.push(listenerForm)
    } else {
      bpmnElementListenersList.splice(listenersIndex, 1, listenerObject)
      listenersList.value.splice(listenersIndex, 1, listenerForm)
    }

    bpmnStore.updateElementExtensions(bpmnElementListenersList)

    userTaskListenersFormRef.value.handleClose()
  }

  //////////////////////////////////////////////////
  // 生命周期
  //////////////////////////////////////////////////
  onMounted(() => {
    nextTick(() => {})
  })
</script>
